<template>
  <div v-page-show="{ show: operate.checkedProject, text: `请选择项目后查看` }">
    <RePage>
      <!-- 顶部title -->
      <div class="flex justify-between mt-[10px]">
        <el-text class="!text-[22px] !font-medium">
          {{ isNullOrEmpty( formInline?.projectName ) }}
        </el-text>
        <div v-auth="'business.project.update'">
          <el-button :icon="Edit" @click="edit()">编辑</el-button>
        </div>
      </div>
      <el-divider class="!my-[25px]" />
      <info :formInline="formInline" :isLoading="isLoading" class="mr-[80px]">
      </info>
    </RePage>


  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import { ref } from "vue";
import RePage from "@/components/RePage/index.vue";
import info from "../info.vue";
import { Edit } from "@element-plus/icons-vue";
import { defaultInfoFrom } from './index';
import { getInfo, editInfo } from '@/api/operate/project-management/projectManagement/index';
import { deviceDetection, } from "@pureadmin/utils";
import editForm from "./form.vue";
import { addDialog } from "@/components/ReDialog";
// import { cloneDeep, isAllEmpty, deviceDetection, debounce } from "@pureadmin/utils";
import { message } from "@/utils/message";
import { customPromiseDebounce } from "@/utils/functions";
import { usePageVariablesStoreHook, UNIT_TYPE_VIEW_Map } from '@/store/modules/pageVariables'
// import { useDark } from "@/views/welcome/utils";
// const { isDark } = useDark();
// watch(() => isDark.value, () => {
//   console.log("地图模式",isDark.value)
// }, {   immediate: true,deep: true })
const operate = usePageVariablesStoreHook().getOperate()
const formInline = ref()
const showInfo = ref();
const isLoading = ref(true)
const formRef = ref();
const mapRef = ref();
// const mapdata = reactive({  //地图数据
//     center: [118.702771,40.002143],
//     area: [[[118.701076,40.003737],[118.707728,40.001568],[118.703865,40.006827],[118.692278,39.998905],[118.702235,39.997491],[118.710517,40.001962]],[[118.686227,40.009174],[118.697342,40.008845],[118.689102,40.004374],[118.691634,40.012066],[118.696527,40.003355]],[[118.699622,40.009612],[118.703269,40.008297],[118.703355,40.010072],[118.701853,40.01027]]]

// })

onMounted(() => {
  getinfo()
});
const getinfo = () => {
  if (operate.checkedProject == null) {
    return
  } else {
    getInfo({ projectId: operate.checkedProject }).then(res => {
      if (res.code == 200) {
        formInline.value = res.result
        isLoading.value = false

        console.log("获取信息", formInline.value);

      }
    }).finally(() => {

    })
  }

}
// 编辑
const edit = () => {
  showInfo.value = {}
  openDialog("编辑项目")
}
// 开启弹窗
const openDialog = (title = "编辑项目") => {
  addDialog({
    title: '编辑项目',
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(editForm, { ref: formRef }),
    openAutoFocus({ options, index }) {
      if (formInline.value) {
        options.props = {
          isLoading: true,
          formInline: defaultInfoFrom()
        }
      }
      getInfo({ projectId: formInline.value.projectId }).then(res => {
        if (res.code == 200) {
          showInfo.value = res.result
          options.props.formInline = res.result
        }
      }).finally(() => {
        options.props.isLoading = false
      })
    },
    beforeSure: (done, { options }) => {
      const FormRef = formRef.value.getRef();
      const formData = options.props.formInline;
      function chores() {
        message(`操作成功`, {
          type: "success"
        });
        done(); // 关闭弹框
        getinfo(); // 刷新表格数据
      }
      FormRef.validate(valid => {
        if (valid && !options.props?.isLoading) {
          // console.log("formData", formData);
          // 表单规则校验通过
          options.props.isLoading = true;

          DebounceEditInfo(formData).then(res => {
            if (res.code == 200) {
              chores();
            }
            options.props.isLoading = false;
          }).catch((err) => {
            if (err !== '请求中') {
              options.props.isLoading = false;
            }
          })

        }
      });
    }
  })
}
// 编辑请求
const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);

</script>
<style scoped></style>
